<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted, ref } from "@vue/runtime-core"
import axios from "axios";
import Toast from "vant/lib/toast";
import 'vant/es/toast/style';

interface SortFilterType {
    sortKey: string
    title: string
}

interface PriceListType {
    minPrice: string
    maxPrice: string
}

interface DocsType {
    iid: string
    img: string
    color: string
    bgColor: string
    title: string
    price: number
    leftbottom_taglist: {
        color: string
        bgColor: string
        content: string
    }
}

const router = useRouter()
const frontword = router.currentRoute.value.query.frontword
const sort = ref('pop')
const index = ref(0)
const sortFilter = ref<SortFilterType[]>([])
const showOrhide = ref(false)
const minPrice = ref('')
const maxPrice = ref('')
const priceList = ref<PriceListType[]>([])
const docsList = ref<DocsType[]>([])
const offset = ref(30)
const loading = ref(false)
const finished = ref(true);


const goodsClassify = (i: number, sorts: string) => {

    sort.value = sorts
    // console.log(sort.value);
    index.value = i
    axios
        .get(`https://apis.netstart.cn/mogujie/search/searchByKeyword?q=${frontword}&page&sort=${sort.value}`)
        .then(({ data }) => {
            sortFilter.value = data.result.sortFilter.map((i: SortFilterType) => {
                return {
                    sortKey: i.sortKey,
                    title: i.title
                }
            })
            // console.log(data);
            docsList.value = data.result.wall?.docs.map((i: DocsType) => {
                return {
                    iid: i.iid,
                    img: i.img,
                    color: i.leftbottom_taglist.color,
                    bgColor: i.leftbottom_taglist.bgColor,
                    title: i.title,
                    price: i.price,
                    content: i.leftbottom_taglist.content
                }
            })
            // finished.value = false
        })
}

const priceClassify = (sorts: string, minPir: string, maxPir: string) => {
    sort.value = sorts
    showOrhide.value = false
    minPrice.value = minPir
    maxPrice.value = maxPir
    axios
        .get(`https://apis.netstart.cn/mogujie/search/searchByKeyword?q=${frontword}&page&sort=${sort.value}&minPrice=${minPrice.value}&maxPrice=${maxPrice.value}`)
        .then(({ data }) => {
            priceList.value = data.result.priceList.map((i: PriceListType) => {
                return {
                    minPrice: i.minPrice,
                    maxPrice: i.maxPrice
                }
            })
            docsList.value = data.result.wall?.docs.map((i: DocsType) => {
                return {
                    iid: i.iid,
                    img: i.img,
                    color: i.leftbottom_taglist.color,
                    bgColor: i.leftbottom_taglist.bgColor,
                    title: i.title,
                    price: i.price,
                    content: i.leftbottom_taglist.content
                }
            })

            finished.value = false
            // console.log(data);
        })
}

const onRefresh = () => {
    setTimeout(() => {
        offset.value += 10;
    }, 1000);
    console.log(offset.value);
    axios
        .get(`https://apis.netstart.cn/mogujie/search/searchByKeyword?q=${frontword}&page&sort=${sort.value}&offset=${offset.value}`)
        .then(({ data }) => {
            docsList.value = data.result.wall?.docs.map((i: DocsType) => {
                return {
                    iid: i.iid,
                    img: i.img,
                    color: i.leftbottom_taglist.color,
                    bgColor: i.leftbottom_taglist.bgColor,
                    title: i.title,
                    price: i.price,
                    content: i.leftbottom_taglist.content
                }
            })
            Toast('刷新成功');
            loading.value = false;
            // console.log(data);
        })
}

const onLoad = () => {
    // 异步更新数据
    setTimeout(() => {
        offset.value += 10;
    }, 1000);
    axios
        .get(`https://apis.netstart.cn/mogujie/search/searchByKeyword?q=${frontword}&page&sort=${sort.value}&offset=${offset.value}`)
        .then(({ data }) => {
            docsList.value = [...docsList.value, ...data.result.wall?.docs]
            loading.value = false;
            //   console.log(data);
        })

};

onMounted(() => {
    goodsClassify(index.value, sort.value)
    priceClassify(sort.value, maxPrice.value, maxPrice.value)
})
</script>


<template>
    <div>
        <div class="goods">
            <div class="goods-bar">
                <div class="search-back" @click="$router.push({ path: '/home' })"></div>
                <input type="text" :value="frontword" @click="$router.push({ path: '/search' })">
                <div class="gouwuche"></div>
            </div>
            <div class="classify">
                <div class="classify-list" v-for="(c, i) in sortFilter" @click="goodsClassify(i, c.sortKey)" :key="i">
                    <div class="list" :class="{ active: sort == c.sortKey }">{{ c.title }}</div>
                </div>
                <div class="classify-price" :class="{ active: showOrhide == true }" @click="showOrhide = !showOrhide">价格
                </div>
            </div>
            <transition name="fade">
                <div class="price-pick" v-show="showOrhide" :class="{ animation: showOrhide == true }">
                    <div class="price-box">
                        <div class="price-top" v-for="(p, i) in priceList" :key="i"
                            @click="priceClassify(sort, p.minPrice, p.maxPrice)">
                            {{ p.minPrice }} -
                            {{ p.maxPrice }}</div>
                    </div>
                    <div class="price-search">
                        <div class="qujian">区间(元)</div>
                        <div class="input-box">
                            <div class="ipt"><input type="text" v-model.trim="minPrice"></div>
                            <div>---</div>
                            <div class="ipt"><input type="text" v-model.trim="maxPrice"></div>
                        </div>
                        <div class="Confirm" @click="priceClassify(sort, minPrice, maxPrice)">确认</div>
                    </div>
                </div>
            </transition>

        </div>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list v-model:loading="loading" @load="onLoad">
                <div class="goods-content">
                    <div class="goods-list" v-for="(g, i) in docsList" :key="i"
                        @click="$router.push({ path: '/merchandise', query: { itemId: g.iid } })">
                        <div class="list-img">
                            <!-- <van-image :src="g.img" /> -->
                            <img :src="g.img">
                        </div>
                        <div class="list-title"><span class="guanggao"
                                :style="{ color: g.leftbottom_taglist?.color, background: g.leftbottom_taglist?.bgColor }">{{
                                        g.leftbottom_taglist?.content
                                }}</span>{{ g.title }}
                        </div>
                        <div class="list-price">
                            <div class="price">¥{{ g.price }}</div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
        <!-- <van-loading size="24px" vertical v-if="finished">加载中...</van-loading> -->
    </div>
</template>

<style lang="scss" scoped>
.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .8s;
}


.ffade-leave-to,
.fade-enter {
    opacity: 1;
}

:deep(.van-pull-refresh__head) {
    top: 75px;
}



// .demo-enter,
// .demo-leave-to {
//     transform: translate(0, 107px, 0);
// }

// .demo-enter-active,
// .demo-leave-active {
//     transition: all .5s linear;
// }

// .demo-enter-to,
// .demo-leave {
//     transform: translate(0, 107px, 0);
// }

.goods {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    margin-bottom: 15px;

    .goods-bar {
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-bottom: 1px solid #666;
        width: 100vw;
        height: 45px;
        background-color: #fff;


        input {
            width: 220px;
            height: 25px;
        }

        .search-back {
            width: 25px;
            height: 20px;
            background-image: url(@/assets/img/return.png);
            background-size: 25px 20px;
            background-position: center center;
            background-repeat: no-repeat;
        }

        .gouwuche {
            width: 25px;
            height: 20px;
            background-image: url(@/assets/img/gouwuche2.png);
            background-size: 25px 20px;
            background-position: center center;
            background-repeat: no-repeat;
        }
    }



    .classify {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100vw;
        height: 37px;
        background-color: #fff;


        .active {
            color: #FF4466;
            // animation: move1 .5s linear both;
        }
    }

    .price-pick {
        position: absolute;
        top: 83px;
        left: 0;
        width: 100vw;
        background-color: #fff;
        border-top: 1px solid #ccc;



        @keyframes move1 {

            from,
            to {
                transform: translate(0, 0);
                opacity: 0;
            }

            // 50% {
            //     transform: rotateX(90deg);
            // }

            to,
            from {
                transform: translate(0, 107px);
                opacity: 1;
            }
        }


        .price-box {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            padding: 10px 0;

            .price-top {
                width: 30vw;
                height: 30px;
                line-height: 30px;
                background-color: #f3f3f3;
                text-align: center;
            }
        }

        .price-search {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 10px 0;

            .input-box {
                display: flex;
                align-items: center;

                input {
                    width: 85px;
                    height: 30px;
                }
            }

            .Confirm {
                width: 80px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                background-color: #f46;
                color: #fff;
            }


        }
    }

    // .animation {
    //     // color: #f46;
    //     // animation: move1 .5s linear both;
    // }
}



.goods-content {
    padding-top: 90px;
    column-count: 2;
    column-gap: 0;
    background-color: #6666662b;

    .goods-list {
        width: 176px;
        height: auto;
        background-color: #fff;
        margin-bottom: 8px;
        margin-left: 6px;
        border-radius: 4px;
        overflow: hidden;

        .list-img {
            width: 176px;
            height: auto;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .list-title {
            margin: 10px 3px;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            font-size: 12px;

            .guanggao {
                margin-right: 3px;
                margin-left: 3px;
                font-size: 12px;
            }
        }

        .list-price {
            display: flex;
            margin-bottom: 5px;

            .price {
                margin-left: 5px;
                color: #333333;
                font-weight: bold;
                margin-bottom: 5pxs;
            }
        }
    }
}
</style>